<div th:fragment="top" xmlns:th="http://www.w3.org/1999/xhtml">
	<!--  预紧器 -->
	<div class="preLoader">
		<div class="preloder-inner">
			<div class="sk-cube-grid">
				<div class="sk-cube sk-cube1"></div>
				<div class="sk-cube sk-cube2"></div>
				<div class="sk-cube sk-cube3"></div>
				<div class="sk-cube sk-cube4"></div>
				<div class="sk-cube sk-cube5"></div>
				<div class="sk-cube sk-cube6"></div>
				<div class="sk-cube sk-cube7"></div>
				<div class="sk-cube sk-cube8"></div>
				<div class="sk-cube sk-cube9"></div>
			</div>
		</div>
	</div>
	<!-- 年底预紧器 -->

	<!-- 主要 头部 -->
	<header class="header">
		<div class="main-header-wraper main-header">
			<div class="container-fluid">
				<div class="row align-items-center">
					<div class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-3">
						<div class="logo-container">
							<!-- 商标 -->
							<div class="logo">
								<a href="index.html">
									<img class='default-logo' src="assets/img/logo.png" data-rjs="2" alt="ecommerce">
									<img class='sticky-logo' src="assets/img/logo2.png" data-rjs="2" alt="ecommerce">
								</a>
							</div>
							<!-- 商标结束 -->

							<!--用户邮箱名称-->
							<th:block th:if="${session.FrontUserinfo}!=null">
							<span>
							    <a href="#"  th:text="${session.FrontUserinfo.frontUserEmail}"></a>
							</span>
							</th:block>
						</div>
					</div>
					<div class="col-6 col-sm-6 col-md-6 col-lg-7 col-xl-6">
						<!-- 菜单的容器 -->
						<div class="menu-container">
							<div class="menu-wraper">
								<nav>
									<!-- Header-menu -->
									<div class="header-menu dosis">
										<div id="menu-button">
										</div>
										<th:block th:if="${session.FrontUserinfo}==null">
										<ul>
											<li><a href="index">首页</a></li>
											<li>
												<a href="/front/shop-5col">商店</a>
											</li>
											<li>
												<a href="#">页面</a>
												<ul>
													<li><a href="search-result">搜索结果</a></li>
												</ul>
											</li>

										    </ul>
										</th:block>

										<th:block th:if="${session.FrontUserinfo}!=null">
											<ul>
												<li><a href="index">首页</a></li>
												<li>
													<a href="/front/shop-5col">商店</a>

												</li>
												<li><a href="/front/userCollection">收藏</a>

												</li>
												<li>
													<a href="#">页面</a>
													<ul>
														<li><a href="/front/cart_show">购物车列表</a></li>
														<!--<li><a href="wish-list">愿望清单</a></li>-->
														<li><a href="myaccount">我的账户</a></li>
<!--														<li><a href="order-tracking">订单跟踪</a></li>-->
														<li><a href="search-result">搜索结果</a></li>
													</ul>
												</li>
											</ul>
										</th:block>
									</div>
									<!-- End of Header-menu -->
								</nav>
							</div>
						</div>
						<!-- 菜单的容器 -->
					</div>
					<div class="col-12 col-sm-12 col-md-3 top-order">
						<!-- 模态菜单 -->
						<div class="modal-menu-container">
							<ul class="list-unstyled mb-0">
<!--								<li>-->
<!--									<div class="search-btn" title="search">-->
<!--										<a href="#">-->
<!--											<img src="assets/img/icons/search-button.svg" alt="" class="svg">-->
<!--										</a>-->
<!--									</div>-->
<!--								</li>-->
<!--								<li>-->
<!--									<div class="cart-btn" title="Cart list">-->
<!--										<a href="login.html">-->
<!--											<img src="assets/img/icons/add-bag.svg" alt="" class="svg">-->
<!--										</a>-->
<!--									</div>-->
<!--								</li>-->
<!--								<li>-->
<!--									<div class="wishlist-btn-off" title="Wish list">-->
<!--										<a href="#">-->
<!--											<img src="assets/img/icons/wishlist.svg" alt="" class="svg">-->
<!--										</a>-->
<!--									</div>-->
<!--								</li>-->

								<li>
									<!--登录注销-->
									<th:block th:if="${session.FrontUserinfo}==null">
										<a href="/front/logout">
											<img src="assets/img/icons/account.svg" alt="" class="svg">
										</a>
									</th:block>
								</li>
								&nbsp;
								<li>
									<th:block th:if="${session.FrontUserinfo}!=null">
									<a href="/front/login_out">注销</a>
									</th:block>
								</li>

								</li>
<!--								<li>-->
<!--									<div class="menu-btn" title="Category menu">-->
<!--										<a href="#">-->
<!--											<img src="assets/img/icons/manu-button.svg" alt="" class="svg">-->
<!--										</a>-->
<!--									</div>-->
<!--								</li>-->
							</ul>
						</div>
						<!-- 模态菜单结束 -->
					</div>
				</div>
			</div>
		</div>
	</header>
	<!-- 主联箱端部 -->

	<!-- 类别菜单 -->
	<div class="slidenav catagory-menu">
		<div class="menu-navigation">
			<div class="container-fluid">
				<div class="row">
					<div class="col">
						<div class="catagory-menu-header d-flex  align-items-center">
							<div class="logo">
								<a href="index.html"><img class='default-logo' src="assets/img/logo.png" data-rjs="2" alt="ecommerce"></a>
							</div>
							<div class="menu-cancel">
								<img src="assets/img/icons/close-button.svg" class="svg" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row">
					<div class="col-md-8 offset-md-2">
						<div class="search-bar primary-form parsley-validate">
							<form action="#" >
								<input type="text" class="theme-input-style" placeholder="Type Your Search Here" required>
								<input type="submit" class="search-icon" value="&#xF002;">
							</form>
						</div>
					</div>
				</div>
				<div class="row justify-content-center">
					<div class="col-lg-10 col-md-12 offset-lg-1">
						<div class="catagory-menu-wrap">
							<nav>
								<ul class="list-unstyled">
									<li><a href="#">男人</a>
										<span><img src="assets/img/icons/man.svg" class="svg" alt=""></span>
										<ul>
											<li><a href="#">上装</a></li>
											<li><a href="#">下装</a></li>
											<li><a href="#">鞋类</a></li>
											<li><a href="#">内外白塔款</a></li>
											<li><a href="#">传统的民族服装</a></li>
											<li><a href="#">手表</a></li>
											<li><a href="#">附件</a></li>
											<li><a href="#">手表</a></li>
											<li><a href="#">附件</a></li>
										</ul>
									</li>
									<li><a href="#">女人</a>
										<span><img src="assets/img/icons/woman.svg" class="svg" alt=""></span>
										<ul>
											<li><a href="#">耳梯 & 野燕麦</a></li>
											<li><a href="#">宽松裤 卡米兹</a></li>
											<li><a href="#">精品服饰</a></li>
											<li><a href="#">沙丽服</a></li>
											<li><a href="#">礼服</a></li>
											<li><a href="#">桃金娘树</a></li>
											<li><a href="#">豪华的宫殿</a></li>
											<li><a href="#">耳梯 & 野燕麦</a></li>
											<li><a href="#">宽松裤 卡米兹</a></li>
										</ul>
									</li>
									<li><a href="#">小孩</a>
										<span><img src="assets/img/icons/kid.svg" class="svg" alt=""></span>
										<ul>
											<li><a href="#">吉尔 & 活动</a></li>
											<li><a href="#">婴儿车</a></li>
											<li><a href="#">托儿所</a></li>
											<li><a href="#">装饰</a></li>
											<li><a href="#">看护 & 喂养</a></li>
											<li><a href="#">儿童玩具</a></li>
											<li><a href="#">洗澡 & 幼儿便盆</a></li>
											<li><a href="#">健康 & 安全</a></li>
											<li><a href="#">婴儿服饰</a></li>
										</ul>
									</li>
									<li><a href="#">家居服饰</a>
										<span><img src="assets/img/icons/home-dec.svg" class="svg" alt=""></span>
										<ul>
											<li><a href="#">智能家居</a></li>
											<li><a href="#">巴斯</a></li>
											<li><a href="#">寝具</a></li>
											<li><a href="#">家具</a></li>
											<li><a href="#">家用电器</a></li>
											<li><a href="#">家具装饰</a></li>
											<li><a href="#">住宅</a></li>
											<li><a href="#">炊具 & 吃饭</a></li>
											<li><a href="#">灯具 & 照明设备</a></li>
											<li><a href="#">皮箱</a></li>
										</ul>
									</li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 菜单结束 -->

	<!-- offcanvas菜单-->

	<!-- offcanvas覆盖 -->
	<div class="offcanvas-overlay"></div>
	<!-- offcanvas覆盖 -->

	<!-- offcanvas mainmenu -->
	<div class="offcanvas offcanvas-mainmenu">
		<div class="offcanvas-cancel">
			<img src="assets/img/icons/close-button.svg" class="svg" alt="">
		</div>
	</div>
	<!-- offcanvas mainmenu -->

	<!-- 愿望清单-->
	<div class="offcanvas offcanvas-wishlist" id="wishlist">
		<div class="offcanvas-head">
			<div class="head-text">
				<img src="assets/img/icons/wishlist2.svg" class="svg" alt="">
				<h3>愿望清单</h3>
			</div>
			<div class="offcanvas-cancel">
				<img src="assets/img/icons/close-button.svg" class="svg" alt="">
			</div>
		</div>

		<div class="offcanvas-inner">
			<div class="added-wish-list">
				<!--  单一的愿望清单 -->
				<div class="single-added-list">
					<!-- 只剩下一个愿望清单 -->
					<div class="single-item-left media align-items-center">
						<img src="assets/img/clients/wishlist1.png" alt="">
						<div class="single-item-details midea-body">
							<h5><a href="#">女子带凉鞋</a></h5>
							<p>$125</p>
						</div>
					</div>
					<!-- 只剩下一个愿望清单 -->

					<!-- 单愿望单 -->
					<div class="single-item-right text-right">
						<a href="#"><img src="assets/img/icons/remove.svg" alt="" class="svg"></a>
						<a href="#" class="btn addto-cart-btn">加入购物车</a>
					</div>
					<!-- 结束单愿望列表的权利 -->
				</div>
				<!-- 结束单一愿望清单 -->

				<!-- 单一的愿望清单 -->
				<div class="single-added-list sold-item">
					<!-- 只剩下一个愿望清单 -->
					<div class="single-item-left media align-items-center">
						<img src="assets/img/clients/wishlist2.png" alt="">
						<div class="single-item-details midea-body">
							<h5><a href="#">威尔逊王朝 29" 篮球</a></h5>
							<p>$25</p>
						</div>
					</div>
					<!-- 只剩下一个愿望清单 -->

					<!-- 单一的愿望清单  -->
					<div class="single-item-right text-right">
						<a href="#"><img src="assets/img/icons/remove.svg" alt="" class="svg"></a>
						<a href="#" class="btn out-stock-btn">缺货</a>
					</div>
					<!-- 只剩下一个愿望清单 -->
				</div>
				<!-- 结束单一愿望清单-->

				<!-- 单一的愿望清单 -->
				<div class="single-added-list">
					<!-- 只剩下一个愿望清单-->
					<div class="single-item-left media align-items-center">
						<img src="assets/img/clients/wishlist3.png" alt="">
						<div class="single-item-details midea-body">
							<h5><a href="#">HyperX游戏耳机</a></h5>
							<p>$15</p>
						</div>
					</div>
					<!-- 只剩下一个愿望清单 -->

					<!-- 单愿望单 -->
					<div class="single-item-right text-right">
						<a href="#"><img src="assets/img/icons/remove.svg" alt="" class="svg"></a>
						<a href="#" class="btn addto-cart-btn">加入购物车</a>
					</div>
					<!-- 结束单愿望列表的权利 -->
				</div>
				<!-- 结束单一愿望清单 -->

				<!-- 添加到按钮的支持-->
				<div class="view-cart-check-btn text-center">
					<a href="#" class='btn btn-fill-type'>查看购物车列表</a>
					<a href="#" class='btn btn-fill-type'>检验</a>
					<p>超过$100的所有订单免费送货!</p>
				</div>
				<div class="cart-support">
					<p class="roboto">支持</p>
					<ul class="list-unstyled">
						<li>
							<span><i class="fa fa-phone"></i></span>
							电话:+00 654 321 9874
						</li>
						<li>
							<span><i class="fa fa-map-marker"></i></span>
							1622 Colins Street West, Strawberry (Le), ITALY
						</li>
					</ul>
				</div>
				<!-- 添加到按钮的支持 -->
			</div>
		</div>
	</div>


	<!-- 愿望清单结束 -->



	<!-- 购物车列表 -->
	<div class="offcanvas offcanvas-cart-list">
		<div class="offcanvas-head">
			<div class="head-text">
				<img src="assets/img/icons/add-bag2.svg" class="svg" alt="">
				<h3>购物车列表</h3>
			</div>
			<div class="offcanvas-cancel">
				<img src="assets/img/icons/close-button.svg" class="svg" alt="">
			</div>
		</div>

		<div class="offcanvas-inner">
			<div class="added-cart-list">
				<!-- single cart list -->
				<div class="single-added-list">
					<!-- single cart list left -->
					<div class="single-item-left media align-items-center">
						<img src="assets/img/clients/wishlist1.png" alt="">
						<div class="single-item-details midea-body">
							<h5><a href="#">女子带凉鞋</a></h5>
							<p>25 X 2</p>
						</div>
					</div>
					<!-- 单购物车列表结束 -->

					<!-- 单愿望单 -->
					<div class="single-item-right text-right">
						<a href="#"><img src="assets/img/icons/remove.svg" alt="" class="svg"></a>
						<h6>$320</h6>
					</div>
					<!-- 单车列表结束右 -->
				</div>
				<!-- 单购物车列表结束 -->

				<!-- 单一的购物车列表 -->
				<div class="single-added-list">
					<!-- 单购物车列表 -->
					<div class="single-item-left media align-items-center">
						<img src="assets/img/clients/wishlist2.png" alt="">
						<div class="single-item-details midea-body">
							<h5><a href="#">美国篮球公司</a></h5>
							<p>25 X 1</p>
						</div>
					</div>
					<!-- singlecart列表结束 -->

					<!-- 单车单 -->
					<div class="single-item-right text-right">
						<a href="#"><img src="assets/img/icons/remove.svg" alt="" class="svg"></a>
						<h6>$13</h6>
					</div>
					<!-- 单车列表结束右-->
				</div>
				<!-- 单购物车列表结束 -->
			</div>
			<!-- 总价 -->
			<div class="total-price">
				<h5>共计</h5>
				<h3>$251</h3>
			</div>
			<!-- 总价结束 -->

			<!-- 添加到按钮的支持 -->
			<div class="view-cart-check-btn text-center">
				<a href="#" class='btn btn-fill-type'>查看购物车列表</a>
				<a href="#" class='btn btn-fill-type'>检验</a>
				<p>超过$100的所有订单免费送货!</p>
			</div>
			<div class="cart-support">
				<p class="roboto">支持</p>
				<ul class="list-unstyled">
					<li>
						<span><i class="fa fa-phone"></i></span>
						电话:+00 654 321 9874
					</li>
					<li>
						<span><i class="fa fa-map-marker"></i></span>
						1622 Colins Street West, Strawberry (Le), ITALY
					</li>
				</ul>
			</div>
			<!-- 添加到按钮的支持 -->
		</div>
	</div>
	<!-- 购物车底单 -->

	<!-- 登录和注册 -->
	<div class="offcanvas offcanvas-account">
		<div class="offcanvas-head">
			<div class="head-text">
				<img src="assets/img/icons/account2.svg" class="svg" alt="">
				<h3>账户</h3>
			</div>
			<div class="offcanvas-cancel">
				<img src="assets/img/icons/close-button.svg" class="svg" alt="">
			</div>
		</div>

		<div class="offcanvas-inner">
			<!-- 登录注册 -->
			<div class="login-register-wrap">
				<!-- 罗琳登记卫星 -->
				<div class="login-register-nav">
					<nav class="nav lr-nav text-center">
						<a id="nav-login-tab" data-toggle="tab" href="#login" class="active">登录</a>
						<a id="nav-register-tab" data-toggle="tab" href="#reg">注册</a>
					</nav>
				</div>
				<!-- 结束登录注册导航 -->

				<!-- 登录注册内容 -->
				<div class="login-register-content tab-content">
					<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="nav-login-tab">
						<div class="primary-form parsley-validate">
							<form action="#">
								<!-- 日志输入 -->
								<div class="name-input input-field">
									<label>
										<img src="assets/img/icons/account3.svg" class="svg" alt="">
									</label>
									<input type="text" placeholder='User name / Email Address' class="theme-input-style" required>
								</div>

								<div class="password-input input-field">
									<label>
										<img src="assets/img/icons/regi-icon.svg" class="svg" alt="">
									</label>
									<input type="password" placeholder='password' class="theme-input-style" required>
								</div>
								<!-- 日志输入-->
								<button type="submit" class="btn btn-fill-type">登录</button>
							</form>
						</div>
					</div>


					<div class="tab-pane fade" id="reg" role="tabpanel" aria-labelledby="nav-login-tab">
						<div class="primary-form parsley-validate">
							<form action="#">
								<!-- 输入注册 -->
								<div class="name-input input-field">
									<label>
										<img src="assets/img/icons/account-icon.svg" class="svg" alt="">
									</label>
									<input type="text" placeholder='User name / Email Address' class="theme-input-style" required>
								</div>

								<div class="email-input input-field">
									<label>
										<img src="assets/img/icons/email-icon.svg" class="svg" alt="">
									</label>
									<input type="email" placeholder='email' class="theme-input-style" required>
								</div>

								<div class="password-input input-field">
									<label>
										<img src="assets/img/icons/regi-icon.svg" class="svg" alt="">
									</label>
									<input type="password" placeholder='password' class="theme-input-style" required>
								</div>
								<!-- 输入注册-->
								<button type="submit" class="btn btn-fill-type">登记</button>
							</form>
						</div>
					</div>
				</div>
				<!-- 结束登录注册内容 -->
			</div>
			<!-- 登入登记册结束 -->

			<!-- 添加到按钮的支持 -->
			<div class="cart-support">
				<p class="roboto">支持</p>
				<ul class="list-unstyled">
					<li>
						<span><i class="fa fa-phone"></i></span>
						电话:+00 654 321 9874
					</li>
					<li>
						<span><i class="fa fa-map-marker"></i></span>
						1622 Colins Street West, Strawberry (Le), ITALY
					</li>
				</ul>
			</div>
			<!-- 添加到按钮的支持 -->
		</div>
	</div>
	<!-- 结束登录和拾荒 -->

	<!-- 关闭画布菜单-->
</div>